<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>欢迎页面-L-admin1.0</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="/css/font.css">
  <link rel="stylesheet" href="/css/xadmin.css">
  <link rel="stylesheet" href="/layui/css/layui.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body class="form-wrap">

<div class="layui-fluid">
  <div class="layui-row layui-col-space15">

    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">添加文章</div>
        <div class="layui-card-body">
          <form id="myForm" method="post" class="layui-form white-bg radius">

            <div class="layui-form-item">
              <label class="layui-form-label">文章标题</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input"  lay-verify="required" name="articleName" >
              </div>
            </div>

            <div class="layui-form-item">
              <label class="layui-form-label">文章摘要</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" name="zhaiYao">
              </div>
            </div>


            <div class="layui-form-item">
              <label class="layui-form-label">文章作者</label>
              <div class="layui-input-block">
                <input type="text" class="layui-input" name="author">
              </div>
            </div>


            <div class="layui-form-item">
              <label class="layui-form-label">文章详细</label>
              <div class="layui-input-block">
                <textarea id="lay_edit" lay-verify="content" name = "content"></textarea>

              </div>
            </div>

            <div class="layui-upload">
              <button type="button" class="layui-btn" id="test1">缩略图片</button>
              <div class="layui-upload-list">
                <img name="headImg" class="layui-upload-img"  style="width: 360px;height: 360px;" id="demo1">
                <input type="hidden" name="imgUrl"   id="headImg">
                <p id="demoText"></p>
              </div>
            </div>


            <div class="layui-form-item">
              <div class="layui-input-block">
                <button type="submit" lay-submit="" class="layui-btn" style="width: 150px" lay-filter="formSubmit" >保存</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script src="/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/xadmin.js"></script>
<script>
  layui.use(['layedit','upload', 'form'], function(){
    var form = layui.form,upload = layui.upload;
    var layedit = layui.layedit;
    layedit.set({	//设置图片接口
      uploadImage: {
        url: '/file/uploads', //接口url
        type: 'post'
      }
    });
    //创建一个编辑器
    var index = layedit.build('lay_edit',{
      height: 350
    });
    //提交时把值同步到文本域中
    form.verify({
      //content富文本域中的lay-verify值
      content: function(value) {
        return layedit.sync(index);
      }
    });
    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/file/uploads' //改成您自己的上传接口
      ,before: function(obj){
        //预读本地文件示例，不支持ie8
        obj.preview(function(index, file, result){
          $('#demo1').attr('src', result); //图片链接（base64）
        });
      }
      ,done: function(res){
        console.log(res)
        //如果上传失败
        if(res.code !=0){
          return layer.msg('上传失败');
        }
        //上传成功
        $("#headImg").val(res.data.src);
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });

    form.on("submit(formSubmit)", function (data) {
      console.log(data.field)
      $.post("/article/save", data.field, function(result){
        layer.msg(result.msg);
      });
      return false;
    })
  });
</script>
</body>


</html>